<template>
  <div>
    <el-form label-width="70px" label-position="right">
      <el-divider>基础配置</el-divider>
      <el-form-item label="名称">
        <el-input v-model="labDesign.activity.label" clearable />
      </el-form-item>
      <el-form-item label="属性">
        <el-input v-model="labDesign.activity.mapper" clearable />
      </el-form-item>
      <el-form-item label="渲染展示">
        <el-switch v-model="labDesign.activity.visible"></el-switch>
      </el-form-item>
      <el-form-item label="渲染条件">
        <el-input v-model="labDesign.activity.renderCondition"></el-input>
      </el-form-item>
      <el-form-item label="响应式">
        <el-input placeholder="<768px" size="mini" :min="0" :max="24" style="width: 70px;" v-model.number="labDesign.activity.xs"></el-input>
        <el-input placeholder="≥768px" size="mini" :min="0" :max="24" style="width: 70px;" v-model.number="labDesign.activity.sm"></el-input>
        <el-input placeholder="≥1200px" size="mini" :min="0" :max="24" style="width: 70px;" v-model.number="labDesign.activity.lg"></el-input>
      </el-form-item>
      <el-form-item label="数据模式">
        <el-select value="" v-model="labDesign.activity.selfType" style="width: 100%" clearable>
          <el-option value="edit" label="可写" />
          <el-option value="view" label="只读" />
        </el-select>
      </el-form-item>
      <el-form-item label="展示范围">
        <el-select value="" v-model="labDesign.activity.lifeScope" style="width: 100%" clearable>
          <el-option value="all" label="所有" />
          <el-option value="form" label="仅表单" />
          <el-option value="table" label="仅表格" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="labDesign.renderItem && labDesign.renderItem.level === 1" label="必填标识">
        <el-switch v-model="labDesign.activity.needValue" />
      </el-form-item>
      <el-form-item label="标签宽度">
        <el-input v-model="labDesign.activity.labelWidth" clearable />
      </el-form-item>
      <el-form-item v-if="['select','radio','checkbox'].includes(labDesign.activity.render)" label="静态选项">
        <el-input @focus="visible = true" placeholder="点击配置静态选项" />
      </el-form-item>
<!--      <el-form-item label="展示条件">
        <el-input type="textarea" @focus="setRenderCondition" v-model="labDesign.activity.renderCondition" :rows="6"></el-input>
      </el-form-item>-->
      <template v-if="attributes && attributes.length > 0">
        <el-divider>{{ labDesign.renderItem.label }}配置</el-divider>
        <el-form-item v-for="item in attributes" :key="item.prop" :label="item.label">
          <el-popover
              v-if="labDesign.activity.render === 'view' && item.prop === 'callCmd'"
              placement="bottom"
              title="视图模型选择"
              width="600"
              trigger="click"
              v-model="viewVisible">
            <app-view-table select @rowSelect="(row) => { selectView(row, item.prop);viewVisible=false}"></app-view-table>
            <el-input slot="reference" v-model="labDesign.activity.props[item.prop]" @click="viewVisible = true" placeholder="选择视图"></el-input>
          </el-popover>
          <el-select v-else-if="['callDb'].includes(item.prop)"  v-model="labDesign.activity.props[item.prop]" style="width: 100%">
            <template v-for="option in appContext.envs">
              <el-option v-if="option.envType === 'db'" :key="option.envProp" :value="option.envProp" :label="option.envLabel"></el-option>
            </template>
          </el-select>
          <el-select v-else-if="['callStore'].includes(item.prop)"  v-model="labDesign.activity.props[item.prop]" style="width: 100%">
            <template v-for="option in appContext.envs">
              <el-option v-if="option.envType === 'store'" :key="option.envProp" :value="option.envProp" :label="option.envLabel"></el-option>
            </template>
          </el-select>
<!--          <el-popover
              v-else-if="['callDb'].includes(item.prop)"
              placement="bottom"
              title="关联选择"
              width="600"
              trigger="click"
              v-model="callVisible">
            <db-table select @rowSelect="(row) => { selectView(row, item.prop);callVisible=false}"></db-table>
            <el-input slot="reference" v-model="labDesign.activity.props[item.prop]" @click="callVisible = true" placeholder="关联选择"></el-input>
          </el-popover>
          <el-popover
              v-else-if="['callStore'].includes(item.prop)"
              placement="bottom"
              title="关联选择"
              width="600"
              trigger="click"
              v-model="storeVisible">
            <store-table select @rowSelect="(row) => { selectView(row, item.prop);storeVisible=false}"></store-table>
            <el-input slot="reference" v-model="labDesign.activity.props[item.prop]" @click="storeVisible = true" placeholder="关联选择"></el-input>
          </el-popover>-->
          <el-select v-else-if="item.type === 'select'" value="" v-model="labDesign.activity.props[item.prop]" style="width: 100%" clearable>
            <el-option v-for="option in item.options" :key="option.value" :value="option.value" :label="option.label" />
          </el-select>
          <el-input v-else-if="item.type === 'input'" v-model="labDesign.activity.props[item.prop]" clearable />
          <el-input-number v-else-if="item.type === 'number'" v-model="labDesign.activity.props[item.prop]" style="width: 100%" clearable controls-position="right" />
          <el-switch v-else-if="item.type === 'switch'" v-model="labDesign.activity.props[item.prop]" />
          <lab-icon v-else-if="item.type === 'icon'" v-model="labDesign.activity.props[item.prop]" />
        </el-form-item>
      </template>
    </el-form>
    <el-dialog :visible.sync="visible" title="请求配置" width="700px">
      <drag-attribute :element="labDesign.activity"></drag-attribute>
    </el-dialog>
  </div>
</template>

<script>

import DragAttribute from "./DragAttribute";
import LabDesign from "../../../mixins/LabDesign";
import ViewTable from "@/views/system/view/ViewTable";
import StoreTable from "@/views/system/store/StoreTable";
import DbTable from "@/views/system/db/DbTable";
import AppViewTable from "@/views/system/app/view/AppViewTable";
export default {
  name: "Attribute",
  components: {AppViewTable, DbTable, StoreTable, ViewTable, DragAttribute},
  mixins: [LabDesign],
  inject: {
    appContext: {
      from: 'appContext',
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      visible: false,
      viewVisible: false,
      callVisible: false,
      storeVisible: false,
    }
  },
  computed:{
    attributes(){
      return this.$LabRender.findAllAttrs(this.labDesign.activity)
    }
  },
  methods: {
    selectView(row, prop) {
      const { callCmd } = row
      this.$set(this.labDesign.activity.props, prop, callCmd)
    },
    setRenderCondition() {
      if (this.$Util.isEmpty(this.labDesign.activity.renderCondition)) {
        Reflect.set(this.labDesign.activity, 'renderCondition', 'const { modelData, Util, $this, element } = args \n return element.visible;')
      }
    }
  }
}
</script>
